<!DOCTYPE html>
<html lang="en">

<head>
	<title>叁石叁网络科技开发有限公司</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="" />
	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- bootstrap-css -->
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<!--// bootstrap-css -->
	<!-- css -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<!--// css -->
	<!-- font-awesome icons -->
	<link href="css/font-awesome.css" rel="stylesheet">
	<!-- //font-awesome icons -->
	<!-- font -->
	<link href="http://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"
		rel="stylesheet">
	<link rel="stylesheet" href="css/kuang.css">
	<!-- //font -->
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/bootstrap.js"></script>
</head>

<body>
	<!-- w3-banner -->
	<div class="w3-banner jarallax">
		<div class="wthree-different-dot">
			<div class="w3layouts-header-top">
				<div class="container">
					<div class="w3-header-top-grids">
						<div class="w3-header-top-left">
							<p><i class="fa fa-volume-control-phone" aria-hidden="true"></i><a href="tel:19943616372"><span style="color:white;">199-4361-6372</span></a></p>
						</div>
						<div class="w3-header-top-right">
							<div class="agileinfo-social-grids">
								<ul>
									<li><a href="#"><i class="fa fa-signal" style="margin: 0 1em 0 0;"></i></a></li>
									<li><a href="#"><i class="fa fa-rss"></i></a></li>
									<img src="./images/logo3.png" alt="" style="width:100px;height:50px;">
								</ul>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
			<div class="head">
				<div class="container">
					<div class="navbar-top">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<div class="navbar-brand logo ">
								<h1><a href="index.html">设计工作室</a></h1>
							</div>

						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav link-effect-4">
								<li class="active first-list"><a href="index.html">首页</a></li>
								<li><a href="about.html">关于我们</a></li>
								<li><a href="gallery.html">创新风采</a></li>
								<!-- <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span data-letters="Pages">Pages</span><span class="caret"></span></a>
									<ul class="dropdown-menu"> 
										<li><a href="icons.html">Web Icons</a></li>
										<li><a href="codes.html">Short Codes</a></li>
									</ul>
								</li>    -->
								<li><a href="contact.html">联系我们</a></li>
							</ul>
						</div><!-- /.navbar-collapse -->
					</div>
				</div>
			</div>
			<!-- banner -->
			<div class="banner">
				<div class="container">
					<div class="slider">

						<script src="js/responsiveslides.min.js"></script>
						<script>
							// You can also use "$(window).load(function() {"
							$(function () {
								// Slideshow 4
								$("#slider3").responsiveSlides({
									auto: true,
									pager: true,
									nav: true,
									speed: 500,
									namespace: "callbacks",
									before: function () {
										$('.events').append("<li>before event fired.</li>");
									},
									after: function () {
										$('.events').append("<li>after event fired.</li>");
									}
								});
							});
						</script>
						<div id="top" class="callbacks_container-wrap">
							<ul class="rslides" id="slider3">
								<li>
									<div class="slider-info">
										<div><img src="./images/logo3.png" alt="" style="width:20%;"></div>
										<h3>叁石叁网络科技开发有限公司</h3>
										<p>SAN shi SAN network technology development co. LTD</p>
										<div class="more-button">
											<a href="#" data-toggle="modal" data-target="#myModal">看到更多</a>
										</div>
									</div>
								</li>
								<li>
									<div class="slider-info">
										<div><img src="./images/timg.gif" alt="" style="width:10%;border-radius:5%;margin-bottom:20px;"></div>
										<h3>技术只有起点，创新没有终点</h3>
										<p>Technology has a beginning and innovation has no end</p>
										<div class="more-button">
											<a href="#" data-toggle="modal" data-target="#myModal">看到更多</a>
										</div>
									</div>
								</li>
								<li>
									<div class="slider-info">
										<div><img src="./images/timg.gif" alt="" style="width:10%;border-radius:5%;margin-bottom:20px;"></div>
										<h3>一个专注于软件制作的科技公司</h3>
										<p>Software production</p>
										<div class="more-button">
											<a href="#" data-toggle="modal" data-target="#myModal">看到更多</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- //banner -->
		</div>
	</div>
	<!-- //w3-banner -->
	<!-- modal -->
	<div class="modal about-modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">叁石叁网络科技开发有限公司</h4>
				</div>
				<div class="modal-body">
					<div class="agileits-w3layouts-info">
						<img src="images/g2.jpg" alt="" />
						<p>叁石叁网络科技有限公司于2017年正式成立，之前一直以工作室的方式存在。随着业务的不断拓展，公司逐渐壮大，现正处于快速发展时期;员工团队也在不断壮大。随之而来的就是高效的工作效率和专业的技能。
							公司业务: 1、传统原创设计(平面、VI、 广告、海报宣传册等设计) 2、定制软件开发(数据处理、销售管理、直播、教育、出行、酒店管理等软件开发)
							3、APP开发(游戏APP、H5开发、U设计、微信公众号、小程序等) 4、淘宝天猫店铺设计装修、电商平台制作开发。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal about-modal fade" id="myModal2" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">关注公众号</h4>
					</div>
					<div class="modal-body">
						<div class="agileits-w3layouts-info">
							<img src="images/gongzhong.jpg" alt="" />
							<p>关注我们，可以随时给我们反馈,追踪公司状态</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	<!-- //modal -->
	<!-- services -->
	<div class="services">
		<div class="container">
			<h2 class="agileits-title">核心服务</h2>
			<div class="w3-services-grids">
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-camera-retro" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>平面设计</h4>
							<p>传统原创设计 平面、VI、广告、海报宣传册等设计。字体排印、视觉艺术、版面、电脑软件等方面的专业技巧 </p>
						</div>
					</div>
					<a href="#"><button class="btn_more">更多</button></a>	
				</div>
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-dashboard" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>游戏软件开发 </h4>
							<p>电子游戏和现实活动性游戏、游戏app开发、游戏ui设计。动作、冒险、模拟、角色扮演和其他游戏软件制作。</p>
						</div>
					</div>
					<a href="#"><button class="btn_more">更多</button></a>	
				</div>
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-th-large" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>App软件开发</h4>
							<p> 数据处理、销售管理、直播、教育、出行、酒店管理等软件开发,微信小程序制作、公众号开发等。</p>
						</div>
					</div>
					<a href="#"><button class="btn_more">更多</button></a>	
				</div>
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-desktop" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>电商平台</h4>
							<p>淘宝天猫店铺设计装修、电商平台制作开发、电商后台管理项目。和其他电商平台开发、制作</p>
						</div>
					</div>
					<a href="#"><button class="btn_more">更多</button></a>	
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //services -->
	<div class="tlinks">Collect from <a href="http://www.cssmoban.com/">建站模板</a></div>
	<!-- Stats -->
	<div class="stats services news-w3layouts jarallax">
		<div class="container">
			<div class="stats-agileinfo agileits-w3layouts">
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img">
						<i class="fa fa-users" aria-hidden="true"></i>
					</div>
					<h6>我们的客户</h6>
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='157000'
						data-delay='.5' data-increment="100">157000</div>
				</div>
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img w3-agileits">
						<i class="fa fa-calendar-check-o" aria-hidden="true"></i>
					</div>
					<h6>分行</h6>
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='850'
						data-delay='8' data-increment="1">850</div>
				</div>
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img w3-agileits">
						<i class="fa fa-briefcase" aria-hidden="true"></i>
					</div>
					<h6>我们的活动</h6>
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='5000'
						data-delay='.5' data-increment="10">5000</div>
				</div>
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img w3-agileits">
						<i class="fa fa-trophy" aria-hidden="true"></i>
					</div>
					<h6>奖项</h6>
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='110'
						data-delay='8' data-increment="1">110</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<!-- Progressive-Effects-Animation-JavaScript -->
			<script type="text/javascript" src="js/numscroller-1.0.js"></script>
			<!-- //Progressive-Effects-Animation-JavaScript -->
		</div>
	</div>
	<!-- //Stats -->
	<!-- welcome -->
	<div class="welcome">
		<div class="container">
			<h3 class="agileits-title">合作流程</h3>
			<div class="welcomerow-agileinfo">
				<h5>严谨的合作流程，层层把关，每一步都严格监控，保障项目如期交付</h5>
				<p>做项目要的是准时、靠谱、省心、有保障！专业团队
						实战经验丰富，千万金额项目经验加持，完美解决您的需求。安全稳定
						多年的技术积累，混合云部署，云防火墙，数据多地互备，全方位监控，为项目的安全开发使用保驾护航。以下是我公司为客户开发软件的工作流程：</p>
			</div>
		</div>
		<div>
				<img src="./images/011_08.jpg" alt="" width="100%;">
			</div>
	</div>
	<div class="welcome">
		<div class="container">
			<h3 class="agileits-title">案例欣赏</h3>
			<div class="welcomerow-agileinfo">
				<h5>全方位满足定制需求，宠物，金融，家装，培训等行业全覆盖</h5>
				<p>我们有优秀的设计团队，多年的软件开发，手机APP，微信平台软件开发经验。电商类，订餐类，资讯类，发单抢单，跑腿类，共享单车类，社区服务类，社交类，聊天类，彩票类，棋牌类，
					政务类，企业管理类，等各种软件皆可根据你的要求定制。

					我们致力于众多客户提供优质的软件。让您的公司通过我公司提供的软件获取更多回报。

					以下是我公司为客户开发的部分APP软件示例：</p>
			</div>
			<!-- <div class="w3-welcome-grids">
					<div class="col-md-3 col-xs-6 w3l-welcome-grid"> 
						<img src="images/g1.jpg" alt=" " class="img-responsive"/>   
						<div class="agileits-welcome-info">
							<h4>Vaesent purus</h4>
							<p>Donec non nibh in dui sagittis finibus. Duis suscipit arcu vel rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="col-md-3 col-xs-6 w3l-welcome-grid">
						<img src="images/g2.jpg" alt=" " class="img-responsive"/>   
						<div class="agileits-welcome-info">
							<h4>Suscipit duis </h4>
							<p>Nibh in dui sagittis donec non finibus. Duis suscipit arcu vel rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="col-md-3 col-xs-6 w3l-welcome-grid">
						<img src="images/g3.jpg" alt=" " class="img-responsive"/>   
						<div class="agileits-welcome-info">
							<h4>Tempor purus</h4>
							<p>Sagittis donec non nibh in dui finibus. Duis suscipit arcu vel rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="col-md-3 col-xs-6 w3l-welcome-grid">
						<img src="images/g4.jpg" alt=" " class="img-responsive"/>   
						<div class="agileits-welcome-info">
							<h4>Praesent tempor</h4>
							<p>Arcu vel donec non nibh in dui sagittis finibus. Duis suscipit rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>  -->
			<div class="htmleaf-container">
				<div class="carousel" data-gap="20">
					<figure>
						<img src="images/5.png" alt="">
						<img src="images/6.png" alt="">
						<img src="images/7.png" alt="">
						<img src="images/8.png" alt="">
						<img src="images/5.png" alt="">
						<img src="images/6.png" alt="">
						<img src="images/7.png" alt="">
						<img src="images/8.png" alt="">
					</figure>
					<nav>
						<button class="nav prev">Prev</button>
						<button class="nav next">Next</button>
						<!-- <div><img src="./images/prev.png" alt="" width="50%"></div>
			                    <div><img src="./images/next.png" alt="" width="50%"></div> -->
					</nav>
				</div>
			</div>
		</div>
	</div>
	<!-- //welcome -->
	<!-- subscribe -->
	<div class="subscribe jarallax">
		<div class="container">
			<div class="agileits-title title2">
				<h3 class="agileits-title sub">我们的帖子</h3>
			    <h3><a href="#" data-toggle="modal" data-target="#myModal2"><i class="glyphicon glyphicon-qrcode" style="color:white;font-size: 50px;"></i></a></h3>
			</div>
			<p>关注我们，可以随时给我们反馈,追踪公司状态</p>
			<form action="http://192.168.101.9:8080/Contactus/addContactus" method="post" target="stop">
				<input type="email" name="userphone" id="email" placeholder="反馈" class="user" required="">
				<iframe name="stop" style="display:none;"></iframe>
				<input type="submit" value="反馈" onclick="saveIntroduction()">
			</form>
		</div>
	</div>
	<!-- //subscribe -->

	<!-- testimonial -->
	<div class="testimonial agileits-w3layouts">
		<div class="container">
			<h3 class="agileits-title">我们有专业的团队为您保驾护航</h3>
			<div class="sap_tabs">
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list">
						<li class="resp-tab-item"><img src="images/1.png" alt="" style="border-radius:50%;"/></li>
						<li class="resp-tab-item"><img src="images/2.png" alt="" style="border-radius:50%;"/></li>
						<li class="resp-tab-item"><img src="images/3.png" alt="" style="border-radius:50%;"/></li>
						<li class="resp-tab-item"><img src="images/4.png" alt="" /></li>
					</ul>
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content">
							<div class="view view-first">
								<p>web前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面设计交互
									创建Web页面或app等前端界面呈现给用户的过程。系统的页面设计和前端的兼容性调试。</p>
								<h5>web前端工程师</h5>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="view view-first">
								<p>根据用户的需求，结合自身所掌握的编程技术，提出初步解决方案。详细深入的掌握所承   担项目的需求分析和设计报告。尽职尽责编写出实现各项功能的完整代码</p>
								<h5>java工程师 </h5>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="view view-first">
								<p>游戏策划、游戏程序。游戏程序主要就是用引擎，国内用的比较多的是cocos2d和unity3d，写代码开发引擎的功能，配合策划和美术实现整个游戏中的所有功能，</p>
								<h5>unity工程师</h5>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="view view-first">
								<p>1、根据产品需求，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计；2、根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计。 6、对页面进行优化，使用户操作更趋于人性化。 7、维护现有的应用产品。5、根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计。 6、对页面进行优化，使用户操作更趋于人性化。 7、维护现有的应用产品。
								</p>
								<h5>ui设计师</h5>
							</div>
						</div>

					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- //testimonial -->

	<!-- footer -->
	<div class="agileits-w3layouts-footer">
			<div class="container">
				<div class="col-md-4 w3-agile-grid">
					<h5>关于我们</h5>
					<img src="./images/logo3.png" alt="" style="width:80%;">
					<!-- <img src="./images/logo.png" alt=""> -->
				
						<!-- <div class="footer-agileinfo-social">
						<ul>
							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#"><i class="fa fa-rss"></i></a></li>
							<li><a href="#"><i class="fa fa-vk"></i></a></li>
						</ul>
					</div> -->
				</div>
				<div class="col-md-4 w3-agile-grid">
					<h5>关注我们</h5>
					<ul style="display:flex;list-style: none;text-align: center;margin-left: -40px;">
						<li style="margin-right: 50px;"><img src="./images/yang.jpg" alt="" style="width:120PX;height:120PX;"> <p>加微信咨询</p></li>
						<!-- <li style="margin-right: 10px;"><img src="./images/qq.jpg" alt="" style="width:100px;height:100px;"> <p>加QQ咨询</p></li> -->
						<li><img src="./images/gongzhong.jpg" alt="" style="width:120PX;height:120PX;"> <p>关注我们</p></li>
					</ul>
					<!-- <div class="w3ls-post-grids">
						<div class="w3ls-post-grid">
							<div class="w3ls-post-img">
								<a href="#"><img src="images/g1.jpg" alt="" /></a>
							</div>
							<div class="w3ls-post-info">
								<h6><a href="#" data-toggle="modal" data-target="#myModal">Donec vel sapien in erat</a></h6>
								<p>Sept 24,2017</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="w3ls-post-grid">
							<div class="w3ls-post-img">
								<a href="#"><img src="images/g4.jpg" alt="" /></a>
							</div>
							<div class="w3ls-post-info">
								<h6><a href="#" data-toggle="modal" data-target="#myModal">Donec vel sapien in erat</a></h6>
								<p>Oct 25,2017</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="w3ls-post-grid">
							<div class="w3ls-post-img">
								<a href="#"><img src="images/g6.jpg" alt="" /></a>
							</div>
							<div class="w3ls-post-info">
								<h6><a href="#" data-toggle="modal" data-target="#myModal">Donec vel sapien in erat</a></h6>
								<p>Nov 06,2017</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div> -->
				</div>
				<div class="col-md-4 w3-agile-grid">
					<h5>地址</h5>
					<div class="w3-address">
						<!-- <div class="w3-address-grid">
							<div class="w3-address-left">
								<i class="fa fa-phone" aria-hidden="true"></i>
							</div>
							<div class="w3-address-right">
								<h6>Phone Number</h6>
								<p><a href="tel:19943616372"><span style="color:white;">199-4361-6372</span></a></p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="w3-address-grid">
							<div class="w3-address-left">
								<i class="fa fa-envelope" aria-hidden="true"></i>
							</div>
							<div class="w3-address-right">
								<h6>Email Address</h6>
								<p>Email :<a href="mailto:example@email.com"> 19943616372@163.com</a></p>
							</div>
							<div class="clearfix"> </div>
						</div> -->
						<div class="w3-address-grid">
							<div class="w3-address-left">
								<i class="fa fa-map-marker" aria-hidden="true"></i>
							</div>
							<div class="w3-address-right">
								<h6>Location</h6>
								<p>公司地址: 河北省高碑店市雄县
								<span>电话 :<a href="tel:19943616372"><span style="color:white;">199-4361-6372</span></a></span>
								</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	<div class="copyright">
		<div class="container">
			<p>Copyright © 2019 叁石叁网络科技开发有限公司 版权所有 粤ICP备11063337号-1</p>
		</div>
	</div>
	<!-- //footer -->
	<!-- ResponsiveTabs -->
	<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('#horizontalTab').easyResponsiveTabs({
				type: 'default', //Types: default, vertical, accordion           
				width: 'auto', //auto or any width like 600px
				fit: true // 100% fit in a container
			});
		});
	</script>
	<!-- //ResponsiveTabs -->

	<script src="js/jarallax.js"></script>
	<script src="js/SmoothScroll.min.js"></script>
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</script>
	<!-- 反馈 -->
	<script>
	function saveIntroduction() {
		if ($("#email").val() == "") {
			alert("请输入您的反馈")
		} else {
			alert("反馈成功!")
		}
	}
	</script>
	<!-- 轮播 -->
	<script type="text/javascript">
		'use strict';

		window.addEventListener('load', function () {
			var carousels = document.querySelectorAll('.carousel');

			for (var i = 0; i < carousels.length; i++) {
				carousel(carousels[i]);
			}
		});

		function carousel(root) {
			var figure = root.querySelector('figure'),
				nav = root.querySelector('nav'),
				images = figure.children,
				n = images.length,
				gap = root.dataset.gap || 0,
				bfc = 'bfc' in root.dataset,
				theta = 2 * Math.PI / n,
				currImage = 0;

			setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
			window.addEventListener('resize', function () {
				setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
			});

			setupNavigation();

			function setupCarousel(n, s) {
				var apothem = s / (2 * Math.tan(Math.PI / n));

				figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

				for (var i = 0; i < n; i++) {
					images[i].style.padding = gap + 'px';
				}
				for (i = 1; i < n; i++) {
					images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
					images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
				}
				if (bfc)
					for (i = 0; i < n; i++) {
						images[i].style.backfaceVisibility = 'hidden';
					}
				rotateCarousel(currImage);
			}

			function setupNavigation() {
				nav.addEventListener('click', onClick, true);

				function onClick(e) {
					e.stopPropagation();
					var t = e.target;
					if (t.tagName.toUpperCase() != 'BUTTON') return;

					if (t.classList.contains('next')) {
						currImage++;
					} else {
						currImage--;
					}
					rotateCarousel(currImage);
				}
			}

			function rotateCarousel(imageIndex) {
				figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
			}
		}
	</script>
</body>

</html>